/*! HTML5 Boilerplate v7.3.0 | MIT License | https://html5boilerplate.com/ */

/* main.css 2.0.0 | MIT License | https://github.com/h5bp/main.css#readme */
/*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */
@import "./common.scss";
html {
  color: #222;
  font-size: 1em;
  line-height: 1.4;
}

/*
   * Remove text-shadow in selection highlight:
   * https://twitter.com/miketaylr/status/12228805301
   *
   * Vendor-prefixed and regular ::selection selectors cannot be combined:
   * https://stackoverflow.com/a/16982510/7133471
   *
   * Customize the background color to match your design.
   */

::-moz-selection {
  background: #b3d4fc;
  text-shadow: none;
}

::selection {
  background: #b3d4fc;
  text-shadow: none;
}

/*
   * A better looking default horizontal rule
   */

hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #ccc;
  margin: 1em 0;
  padding: 0;
}

/*
   * Remove the gap between audio, canvas, iframes,
   * images, videos and the bottom of their containers:
   * https://github.com/h5bp/html5-boilerplate/issues/440
   */

audio,
canvas,
iframe,
img,
svg,
video {
  vertical-align: middle;
}

/*
   * Remove default fieldset styles.
   */

fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}

/*
   * Allow only vertical resizing of textareas.
   */

textarea {
  resize: vertical;
}

/* ==========================================================================
     Browser Upgrade Prompt
     ========================================================================== */

.browserupgrade {
  margin: 0.2em 0;
  background: #ccc;
  color: #000;
  padding: 0.2em 0;
}

/* ==========================================================================
     Author's custom styles
     ========================================================================== */

/* ==========================================================================
     Helper classes
     ========================================================================== */

/*
   * Hide visually and from screen readers
   */

.hidden {
  display: none !important;
}

/*
  * Hide only visually, but have it available for screen readers:
  * https://snook.ca/archives/html_and_css/hiding-content-for-accessibility
  *
  * 1. For long content, line feeds are not interpreted as spaces and small width
  *    causes content to wrap 1 word per line:
  *    https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
  */

.sr-only {
  border: 0;
  clip: rect(0, 0, 0, 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
  /* 1 */
}

/*
  * Extends the .sr-only class to allow the element
  * to be focusable when navigated to via the keyboard:
  * https://www.drupal.org/node/897638
  */

.sr-only.focusable:active,
.sr-only.focusable:focus {
  clip: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  position: static;
  white-space: inherit;
  width: auto;
}

/*
  * Hide visually and from screen readers, but maintain layout
  */

.invisible {
  visibility: hidden;
}

/*
  * Clearfix: contain floats
  *
  * For modern browsers
  * 1. The space content is one way to avoid an Opera bug when the
  *    `contenteditable` attribute is included anywhere else in the document.
  *    Otherwise it causes space to appear at the top and bottom of elements
  *    that receive the `clearfix` class.
  * 2. The use of `table` rather than `block` is only necessary if using
  *    `:before` to contain the top-margins of child elements.
  */

.clearfix:before,
.clearfix:after {
  content: " ";
  /* 1 */
  display: table;
  /* 2 */
}

.clearfix:after {
  clear: both;
}

/* ==========================================================================
     EXAMPLE Media Queries for Responsive Design.
     These examples override the primary ('mobile first') styles.
     Modify as content requires.
     ========================================================================== */

@media only screen and (min-width: 35em) {
  /* Style adjustments for viewports that meet the condition */
}

@media print,
(-webkit-min-device-pixel-ratio: 1.25),
(min-resolution: 1.25dppx),
(min-resolution: 120dpi) {
  /* Style adjustments for high resolution devices */
}

/* ==========================================================================
     Print styles.
     Inlined to avoid the additional HTTP request:
     https://www.phpied.com/delay-loading-your-print-css/
     ========================================================================== */

@media print {

  *,
  *:before,
  *:after {
    background: transparent !important;
    color: #000 !important;
    /* Black prints faster */
    box-shadow: none !important;
    text-shadow: none !important;
  }

  a,
  a:visited {
    text-decoration: underline;
  }

  a[href]:after {
    content: " ("attr(href) ")";
  }

  abbr[title]:after {
    content: " ("attr(title) ")";
  }

  /*
       * Don't show links that are fragment identifiers,
       * or use the `javascript:` pseudo protocol
       */
  a[href^="#"]:after,
  a[href^="javascript:"]:after {
    content: "";
  }

  pre {
    white-space: pre-wrap !important;
  }

  pre,
  blockquote {
    border: 1px solid #999;
    page-break-inside: avoid;
  }

  /*
       * Printing Tables:
       * https://web.archive.org/web/20180815150934/http://css-discuss.incutio.com/wiki/Printing_Tables
       */
  thead {
    display: table-header-group;
  }

  tr,
  img {
    page-break-inside: avoid;
  }

  p,
  h2,
  h3 {
    orphans: 3;
    widows: 3;
  }

  h2,
  h3 {
    page-break-after: avoid;
  }
}

// Header
body {
  font-family: "Youyuan,Kaiti", sans-serif;
  font-size: $font-size-normal;
  color: $font-color-normal;
  width: 100%;
}

a {
  color: $font-color-normal;
  &.active-link {
    color:#1E86E7;
  }
  &:hover {
    text-decoration: none;
  }
}
button.close,button.btn{
  &:focus {
    box-shadow: none !important;
    outline: 0;
  }
}

header {
  background-color: white;
  height: 60px;
  border-bottom: 1px solid #e8e8e8;

  nav {
    li.nav-item {
      &:hover {
        .child-content {
          display: block;
        }
      }

      >a.nav-link {
        color: $font-color-normal;
        padding: 10px 20px;
        height: 60px;
        font-size: $font-size-lg;
        line-height: 2.6;
        + .icon {display: none;}
        &:after {
          content: "";
          display: block;
          width: 20px;
          height: 2px;
          background-color: #333;
          transition: all ease 0.3s;
          margin: auto;
          opacity: 0;
        }

        &:hover {
          color: $font-color-normal-hover;

          &:after {
            opacity: 1;
          }
        }
      }

      .child-content {
        position: fixed;
        display: none;
        width: 100%;
        background-color: white;
        left: 0;
        top: 60px;
        padding: 40px 0;
        min-height: 405px;
        box-shadow: 0 3px 3px 0 hsla(0, 0%, 90.2%, .5), 0 1px 0 0 #e8e8e8;

        ul {
          padding-left: 0;
          list-style: none;
        }

        >ul.child {
          width: 75%;
          margin: 0 auto;
        }

        .child-list {
          display: flex;
          justify-content: space-between;

          .child-item {

            &:nth-child(2),
            &:nth-child(3) {
              padding-top: 46px;
            }

            li {
              margin-bottom: 15px;

              &.title {
                font-size: 18px;
                font-weight: bold;
                margin-bottom: 40px;
              }

              a {
                &.new::after {
                  content: '';
                  display: inline-block;
                  width: 24px;
                  height: 12px;
                  background-size: contain;
                  margin-left: 15px;
                  background-image: url('../img/brand-new.svg');
                }

                color: $font-color-normal;

                &:hover {
                  color: $font-color-normal-hover;

                }
              }
            }
          }
        }
      }
    }

    .login {
      a:hover {
        text-decoration: none;
      }

      button.login-btn {
        padding: 5px 25px;
        font-size: $font-size-normal;
        border-color: $font-color-normal;
        color: $font-color-normal;

        &:hover {
          background-color: white;
          color: $font-color-normal;
        }
      }
    }
  }
}

main {
  .hero {
    display: flex;
    align-items: center;
    justify-content: center;

    video {
      width: 100%;
    }

    .hero-content {
      position: absolute;
      text-align: center;

      .hero-img {
        max-height: 100px;
        margin-bottom: 20px;
      }

      .hero-intro {
        text-align: center;
        color: white;

        p {
          font-size: $font-size-lg;
        }
      }
    }

    .hero-actions {
      a {
        color: white;
        border-color: white;
        padding: 10px 50px;

        &:hover {
          background-color: rgba($color: white, $alpha: 0.2);
        }
      }
    }
  }

  .hot-download {
    margin: auto;
    width: 75%;
    padding: 40px 0 70px 0;

    h1.title,
    >p {
      text-align: center;
    }

    >p {
      letter-spacing: 4px;
      font-family: "arial";
    }

    >.row {
      margin-left: -5px;
      margin-right: -5px;
    }

    section.item {
      background-color: #eee;
      text-align: center;
      padding: 50px 0 0 0;
      margin: 0 5px;
      border-top: 2px solid #9fd7fd;

      &:first-child {
        border-color: #a0c6ff;
        margin-left: 0;
      }
      &:nth-child(2n) {
        border-color: #a0c6ff;
      }

      &:nth-child(3n) {
        border-color: #89d9c2;
      }

      &:nth-child(4n) {
        border-color: #f09c96;
        margin-right: 0;
      }

      h3 {
        font-size: 18px;
        margin-bottom: 24px;
      }

      .desc {
        p {
          font-size: $font-size-normal;
          line-height: 1.6;
        }
      }

      a.btn {
        margin-bottom: 24px;
        padding: 5px 25px;
        font-size: $font-size-small;
      }
    }
  }

  .news {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 100%;

    .item {
      width: calc(50% - 5px);
      margin-bottom: 10px;
      display: flex;
      justify-content: center;
      align-items: center;
      background-size: cover;
      background-repeat: no-repeat;
      background-image: url('../img/n1.jpg');

      &:nth-child(2) {
        background-image: url('../img/n2.jpg');
      }

      &:nth-child(3) {
        background-image: url('../img/n3.jpg');
      }

      &:nth-child(4) {
        background-image: url('../img/n4.jpg');
      }

      .box {
        min-height: 300px;
        width: 100%;
        text-align: center;
        padding: 80px 0;

        img.item-logo {
          height: 96px;
          margin-bottom: 25px;
        }

        h3 {
          font-size: 18px;
          font-weight: bold;
        }

        a.btn {
          margin-top: 15px;
        }
      }
    }
  }
}

footer {
  .mod-help {
    padding-top: 80px;
    background: url('../img/footer-bg.jpg') center no-repeat;
    background-size: cover;

    .inner {
      width: 75%;
      margin: auto;
      .help-list {
        display: flex;

        .help-nav {
          margin-left: 6%;
          list-style: none;

          &:first-child {
            margin-left: 0;
            padding-left: 0;
          }

          li {
            font-size: $font-size-lg;
            margin-bottom: 10px;

            &.title {
              margin-bottom: 25px;
              font-size: 18px;
            }

            .footer-qrcode {
              max-height: 100px;
              margin-bottom: 5px;

              +span {
                font-size: $font-size-small;
                display: block;
                text-align: center;
              }
            }
          }
        }

        .help-contact {
          margin-left: auto;

          .logo-footer {
            margin-bottom: 25px;
          }

          p.phone-1,
          p.phone-2 {
            font-size: 18px;
            margin-bottom: 0;
          }

          .addr {
            margin-top: 5px;

            p {
              margin: 0;
            }

            font-size: $font-size-small;
          }
        }
      }
    }
  }
  .mod-copyright {
      padding: 50px 0;
      display: flex;
      width: 75%;
      margin:auto;
      font-size: $font-size-small;
      justify-content: space-between;
      .cp-1 {
          .partners {
              .links {
                  margin-right: 8px;
                  &:first-child {
                    margin-right: 10px;
                }
              }
              margin-bottom: 50px;
          }
          .ppt {
              .links {
                  margin-right: 5px;
              }
          }
      }
      .cp-2 {
          .language-switcher {
              &:hover {
                  .language-list {opacity:1;}
              }
              position: relative;
              .language {
                  border:1px solid #e8e8e8;
                  padding: 8px 30px 8px 8px;
                  border-radius: 3px;
              }
              .trigger {
                  position: absolute;
                  top: 8px;
                  right: 8px;
              }
              .language-list {
                opacity: 0;
                position: relative;
                top: 1px;
                list-style: none;
                padding: 8px;
                border: 1px solid #e8e8e8;
                border-radius: 3px;
                li {
                  &:hover {
                      background-color: #eee;
                      a {color: $font-color-normal;}
                  }
                }
              }
          }
      }
  }
}

/*##Media start*/
@media (max-width: 768px) {
  header {
    height: auto;
    nav {
      #mainNavbar {
        position: absolute;
        top: 40px;
        left: 0;
        right: 0;
        background-color: #f8f9fa;
        .nav-item {
          border-bottom: 1px solid #eee;
          width: 100%;
          overflow: hidden;
          display: flex;
          flex-wrap: wrap;
          a.nav-link {
            height: auto;
            padding: 5px 12px;
            font-size: $font-size-normal;
            width: 75%;
            &.has_child {
              +.icon {
                float: right;
                margin: 0 12px 0 auto;
                padding: 5px 12px;
                display: inline-block;
                line-height: 2.2em;
                transition: all 0.2s;
                transform-origin: center 45%;
              }
            }
            &::after {
              display: none;
            }
          }
          .child-content {
            position: static;
            top: unset;
            display: none;
            min-height: unset;
            padding: 0;
            .child {
              width: auto;
              .child-list {
                overflow-x: scroll;
                padding: 20px;
                justify-content: unset;
                flex-flow: nowrap row;
                ul.child-item {
                  flex: 0 0 auto;
                  padding: 10px 20px;
                  background-color: #eee;
                  margin-right: 20px;
                }
              }
            }
          }
        }
      }
      .navbar-toggler {
        &:focus {outline: none;}
        &[aria-expanded~="true"] {
          svg.bi-x {display: inline !important;}
          svg.bi-list { display: none;}
        }

      }
     .login {
       button.login-btn {
         border: none;
         font-size: $font-size-normal;
         padding: 5px 12px;
       }
     }

    }
  }
  main {
    .hero {
      .hero-video {
        height: 40vh;
        width: 100%;
        background: url("../img/mobile-video.jpg") no-repeat center;
        video {display: none;}
      }
      .hero-content {
        .hero-img {
          max-height: 60px;
        }
        .hero-intro {
          h1 {
            font-size: 18px;
            font-weight: bolder;
          }
          p {font-size: 14px;}
        }
        .hero-actions {
          a {padding: 4px 16px;font-size: 14px;}
        }
      }
    }
  }
  footer {
    .mod-help {
      padding: 40px 0;
      .inner {
        width: 96%;
        .help-list {
          flex-flow: wrap column;
          .help-nav {
            margin: 0;
            padding: 0;
            display: flex;
            flex-wrap: wrap;
            li {
              font-size: $font-size-small;
              margin-right: 1em;
              &.title {
                margin: 0 2em 0 0;
                font-size: $font-size-normal;
              }
            }
          }
        }
      }
    }
  }
}

@media (max-width: 576px) {
  main {
    .hot-download {
      width: 98%;
      section.item {
        margin: 0 0 5px 0;
        flex: 1 1 49%;
        &:nth-child(odd) {
          margin-right: 5px;
        }
        &:nth-child(even) {
          margin-left: 0;
          margin-right: 0;
        }
      }
    }
    .news {
      .item {
        .box {
          img.item-logo {height: 50px;}
        }
      }
    }
  }
  footer {
    .mod-help {
      .inner {
        .help-list {
          .help-contact {
            margin-left: 0;
          }
        }
      }
    }
    .mod-copyright {
      width: 98%;
      padding: 30px 0 0;
      .cp-1 {
        .partners,.ppt {
          margin-bottom: 20px;
        }

      }
    }
  }
}
/*##Media end*/
//extra
.bs-hide {
  #loginModal{
    .modal-dialog {width: 400px;}
    .modal-title{font-size: $font-size-lg;}
    .modal-body { padding: 50px 0;}
    .login-wrapper {
      > form {
        margin-bottom: 80px;
        > .form-group:first-child {
         .input-group {
           input, .wechat-logo {
            background-color: #38B54A;
           }
           #wechatbtn {
            border-left-color:#26A238;
            &::placeholder {
              color: white;
            }
          }
           .wechat-logo {
             background-image: url('../img/login.list.png');
           }
         }
        }
        .form-group {
          .input-group-text.wechat-logo, .input-group-text.other-login {
            border-right-color:#26A238;
             background-image: url('../img/login.list.png');
             background-position: 0 -28px;
             width: 52px;
             height: auto;
             background-origin: content-box;
          }
          .input-group-text.other-login {
            background-position: 5px -59px;
          }
          input {
            cursor: pointer;
            &:focus {
              box-shadow: none;
              outline: 0;
            }
            &::placeholder {
              font-size: $font-size-normal;
            }
          }
        }
      }
      .other-login {
        > a.qq-login, a.dd-login {
          display: inline-block;
          > span {
            background-image: url('../img/login.list.png');
            display: inline-block;
            width: 16px;
            height: 14px;
            margin-right: 5px;
            vertical-align: baseline;
            background-position: 0 -349px;
            position: relative;
            top:3px;
          }
        }
        a.qq-login {
          margin-right: 10px;
        }
        a.dd-login {
          span {
            background-position: 0 -432px;
          }
        }
        .other-more {
          cursor: pointer;
        }
      }
      .provicy {
        label {
          font-size: $font-size-small;
          a {color:#1E86E7;text-decoration: underline;}
        }
      }
    }
    .login-wrapper, .wechat-qrcode, .more-login, .login-form,.forget-password , .register-account {
      height: 260px;
      width: 240px;
      margin: auto;
    }
    .website-provicy {font-size: $font-size-small;}
    .wechat-qrcode {img {height: 200px;}}
    //表单状态
    .show-password {
      svg {
        opacity: 0.5;
      }
      &.active {
        svg {
          opacity: 1;
        }
      }
    }
    .more-login {
      .form-group {
        .input-group-text {
          width: 52px;
          background-image: url('../img/login.list.png');
          background-position: 9px -110px;
          background-size: 130%;
          background-color: #FF7C23;
          border-color: #E86E1B;
        }
        input.form-control {
          background-color: #FF7C23;
          border-color: #E86E1B;
          cursor: pointer;
          &::placeholder {color: white; font-size: $font-size-normal;}
          &:focus {
            box-shadow: none;
            outline: 0;
          }
        }
        &:nth-child(2) {
          .input-group-text, input.form-control {
            background-color: #ED4B4B;
            border-color: #DA4A4A;
          }
          .input-group-text {
            background-position-y: -150px;
          }
        }&:nth-child(3) {
          .input-group-text, input.form-control {
            background-color: #6EBC46;
            border-color:#68AB47;
          }
          .input-group-text {
            background-position:11px -302px;
          }
        }&:nth-child(4) {
          .input-group-text, input.form-control {
            background-color: #0096E6;
            border-color: #007EC2;
          }
          .input-group-text {
            background-position:4px -642px;
          }
        }&:nth-child(5) {
          .input-group-text, input.form-control {
            background-color: #9088DF;
            border-color: #847BD8;
          }
          .input-group-text {
            background-position:11px -268px;
          }
        }
      }
    }
    .forget_password_btn , .register_account_btn {
      cursor: pointer;
    }
  }
  // TOAST
  .toast {
    z-index: 100000;
    width: 20%;
    position: fixed;
    top: 100px;
    right: 30px;
  }
  #return_login-wrapper {
    position: relative;
    top: -2px;
    font-size: 14px;
    margin-right: 5px;
  }
  .login-return {
    cursor: pointer;
  }
}
